// 1. 为发送验证码按钮添加点击事件
// 2. 检查手机号字段是否验证通过
// 3. 获取用户在表单控件中输入的手机号
// 4. 发送请求获取手机验证码
// 5. 实现页面中的倒计时效果

import { UseFormGetFieldState, UseFormGetValues } from "react-hook-form";
import { LoginFormState } from "@pages/login";
import { useLazySendMsgCodeQuery } from "@service/authEndpoints";
import { useEffect, useState } from "react";
import styles from "@styles/login.module.less";

interface Props {
  getFieldState: UseFormGetFieldState<LoginFormState>;
  getValues: UseFormGetValues<LoginFormState>;
}

export default function SendMsgCode({ getFieldState, getValues }: Props) {
  const [sendMsgCode] = useLazySendMsgCodeQuery();
  // 倒计时
  const [count, setCount] = useState(60);
  // 记录是否正在倒计时
  const [isActive, setIsActive] = useState(false);
  // 当发送验证码按钮被点击时执行
  const onSendMsgCodeButtonClicked = () => {
    // 如果正在倒计时, 阻止程序继续运行
    if (isActive) return;
    // 获取手机号字段是否验证通过
    const { invalid } = getFieldState("mobile");
    // 如果没有验证通过, 阻止程序继续向下执行
    if (invalid) return;
    // 验证通过, 获取手机号
    const mobile = getValues("mobile");
    // 发送请求, 获取手机验证码
    sendMsgCode(mobile);
    // 正在倒计时
    setIsActive(true);
  };

  useEffect(() => {
    // isActive 如果为假, 阻止代码继续执行, 否则开启倒计时
    if (!isActive) return;
    // 开启倒计时
    const timer = setInterval(() => {
      setCount((prev) => prev - 1);
    }, 1000);
    return () => clearInterval(timer);
  }, [isActive]);

  useEffect(() => {
    // 如果 count 为 0
    if (count === 0) {
      // 恢复 count 值, 方便下次倒计时
      setCount(60);
      // 更新倒计时状态
      setIsActive(false);
    }
  }, [count]);

  return (
    <button
      type="button"
      onClick={onSendMsgCodeButtonClicked}
      className={isActive ? styles.active : ""}
    >
      {isActive ? `剩余${count}秒` : `发送验证码`}
    </button>
  );
}
